<template>
  <div style="padding:10px" >
    <a-row>
      <a-col :span="24">
        <a-input-search
          v-model:value="SearchText"
          placeholder="搜索标题"
          enter-button
          @search="onSearch"
        />
      </a-col>
    </a-row>

<!-- @change="changeActivekey" -->
    <a-collapse v-model:activeKey="activeKey"   :bordered="false">
      <a-collapse-panel key="status" header="状态">
        <a-checkbox-group :style="{ width: '100%' }" v-model:value="statuClass">
          <!-- <a-checkbox value="A"> 全部 </a-checkbox>  -->
          <a-checkbox
            v-for="(item) in statuGroup"
            :value="item.statu"
            :key="item.statu" 
          >
            {{ item.name }}</a-checkbox
          >
        </a-checkbox-group>
      </a-collapse-panel>

      <a-collapse-panel  @click="showTabClass" key="tags" header="标签" :disabled="false">
        <a-checkbox-group style="width: 100%" v-model:value="selectTabClass">
          <a-checkbox v-for="item in TabClass" :key="item" :value="item.id">
            {{ item.name }}
          </a-checkbox>
        </a-checkbox-group>
      </a-collapse-panel>
    </a-collapse>
    <br /> 
    <div style="padding: 5px">时间|热度</div>
    <a-list  item-layout="horizontal" :data-source="dataList">
      <template #renderItem="{ item }">
        <a-list-item>
          <template #actions>
          <router-link :to="{name:'article-editor',query:{id:item.uuid}}">
            <a name="编辑" style="font-size: 20px">✎</a>
          </router-link>
            <a style="font-size: 20px">···</a>
          </template>
          <a-list-item-meta
            :description="item.type"
          >
            <template #title>
             {{ item.title }}
            </template>
            <template #avatar>
              <a-avatar
                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              />
            </template>
          </a-list-item-meta>
        </a-list-item>
        <div>123</div>
      </template>
    </a-list>
    <br />
    <a-pagination
      show-quick-jumper
      v-model:current="current1"
      :total="total"
      @change="onChange"
    
    />
  </div>
</template>
<script>
import {SearchForTitleStatusTabs,GetTagAll} from "@/adminCore/api/article"
import  statusRule from "./status-rule"

export default {
  data() {
    return {
      selectTabClass: [],
      TabClass: [{id: -1, name: "默认"}],
      statuClass: [],
      statuGroup:statusRule,
      SearchText: "",
      activeKey: ["status"],
      current1: 1,
      SearchValue:"",
      total:0,
      dataList: [{title:"查询",type:"标签",uuid:1}      ], //默认
    };
  },
  mounted(){
     
      //  获取标签
        GetTagAll().then( ({data})=>{ 

       this.TabClass=data.map(item=>{
         return{
           id:item.id,
           name:item.name
         }
       })
     })
  },
  methods: {
    onSearch(SearchValue) { 
      this.SearchValue=SearchValue
     this.SearchList(SearchValue)
    },
  SearchList(SearchValue,currentPage=1,loadCount=10){
  SearchForTitleStatusTabs({tagGroup:this.selectTabClass,title:SearchValue,status:this.statuClass.concat(),currentPage,loadCount}).then(({data,totalCount, totalPage})=>{
       let temp=data.map(item=>{
         return{
           uuid:item.guid,
           title:item.title, 
           type:item.tagGroup,
           status:item.status
         }
       }) 
        this.dataList=temp 
        this.total=totalCount
        console.log(totalPage)
     }) 
  },

    // changeActivekey(key) {
     
    // },
    onChange(pageNumber) {
      this.SearchList(this.SearchValue,pageNumber)
    },
// TabClass
    
  },

};
</script>